<!DOCTYPE html>
<html>
<!-- removed for now, causes problems in Firefox: manifest="svg-editor.manifest" -->
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge, chrome=1"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>

<link href="jquery/jquery-ui.min.css" rel="stylesheet">
<script src="jquery/jquery3.min.js"></script>
<script src="jquery/jquery-ui.min.js"></script>


  <style>
  div {
    padding: 15px;
  }
  p {
    margin-left: 10px;
  }
  
  .ui-menu { width: 150px; }
  </style>
  
  
</head>

<body>


<div>
  <p>Hello</p>
</div>
<p></p>
 
<script>
var p = $( "p:first" );
var position = p.position();
$( "p:last" ).text( "left: " + position.left + ", top: " + position.top );
</script>


<div id="target">
    右键单击这里
</div>
<script>
$(function () { 
  $( "#menu" ).menu();
  
    $( "#target" ).contextmenu(function(aEve) {

        
        $( "#menu" ).toggle();
        
        p.html( "left: " + aEve.pageX + ", top: " + aEve.pageY );
        
        
        
        
        $( "#menu" ).offset ( {top:aEve.pageY,left:aEve.pageX} );
   
        return false;
    });
})
</script>


<ul id="menu" style="display:None; position: relative; ">
  <li class="ui-state-disabled"><div>Toys (n/a)</div></li>
  <li><div>Books</div></li>
  <li><div>Clothing</div></li>
  <li><div>Electronics</div>
    <ul>
      <li class="ui-state-disabled"><div>Home Entertainment</div></li>
      <li><div>Car Hifi</div></li>
      <li><div>Utilities</div></li>
    </ul>
  </li>
  <li><div>Movies</div></li>
  <li><div>Music</div>
    <ul>
      <li><div>Rock</div>
        <ul>
          <li><div>Alternative</div></li>
          <li><div>Classic</div></li>
        </ul>
      </li>
      <li><div>Jazz</div>
        <ul>
          <li><div>Freejazz</div></li>
          <li><div>Big Band</div></li>
          <li><div>Modern</div></li>
        </ul>
      </li>
      <li><div>Pop</div></li>
    </ul>
  </li>
  <li class="ui-state-disabled"><div>Specials (n/a)</div></li>
</ul>


</body>

</html>



